# Component: Form Switch

Configurable toggle input with optional radio-style constraints

Form Block

### BEM Anatomy

| Type      | Class Name          | Description                                                                                              |
| --------- | ------------------- | -------------------------------------------------------------------------------------------------------- |
| Bootstrap | `.form-check-input` | The interactive input. Styled with normalized right margins for label alignment.                         |
| Bootstrap | `.form-label`       | The textual label. Enforces `white-space: nowrap` to prevent UI fragmentation.                           |
| Bootstrap | `.form-check`       | Bootstrap utility that provides the flexbox context and spacing for checkboxes and radios.               |
| Bootstrap | `.form-switch`      | Bootstrap utility that transforms a standard checkbox into a toggle switch visual.                       |
| ==Block== | `.as-form-switch`   | The core wrapper. Integrates with Bootstrap `.form-check` and `.form-switch`.                            |
| Modifier  | `--radio`           | Alters behavior to act like a radio button (cannot be unchecked once active) and maintains full opacity. |

### Operational Logic

This component provides a clean interface for toggling Boolean values. It includes a `PreventTranslation` hook (via `.skiptranslate`) for labels that should remain in their original language. The "Radio Behavior" ensures that once a value is `true`, the input becomes disabled, effectively mirroring a single-choice radio button's persistence.

##### Generated HTML (Standard Switch)

```html
<div class="as-form-switch form-check form-switch">
    <label class="form-label">
        <input type="checkbox" class="form-check-input" />
        <span>Enable Notifications</span>
    </label>
</div>
```

##### SCSS

```scss
.as-form-switch {
  margin: 0;

  .form-check-input {
    // Ensures gutter between toggle and text
    margin-right: 0.5rem; 
  }

  .form-label {
    margin: 0;
    white-space: nowrap; // Prevents labels from breaking
  }

  &--radio {
    .form-check-input {
      // Overrides disabled opacity for better visibility
      opacity: 1 !important;
    }
  }
}
```
